<template>
    <div style="height: 100%">
        <navbar>
            <template #title>
                <div class="header-btn-search">
                    <router-link tag="div" to="/search">
                        <span>
                            {{ $t("button_search") }}
                        </span>
                    </router-link>
                </div>
            </template>
            <template #right>
                <a class="drawer-icon" @click="isShowDrawer = true" v-if="catalogList.first && catalogList.first.length !== 0 || (childCatalogs.childCatalogCount && childCatalogs.childCatalogCount !== 0)">
                    <div class="box-14">
                        <i class="catalog-icon"></i>
                    </div>
                </a><!--目录-->
                <a class="drawer-icon cur" v-if="catalogList.first && catalogList.first.length == 0 || (catalogList.first && catalogList.first.length !== 0 && childCatalogs.childCatalogCount == 0)">
                    <div class="box-14">
                        <i class="catalog-icon"></i>
                    </div>
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="header-select header-select-sort">
                <ul class="header-select-list">
                    <li @click="selectClassList('itm_publish_timestamp')" :class="{'cur': sortname == 'itm_publish_timestamp' }">{{ $t("information_new") }}</li><!--最新-->
                    <li @click="selectClassList('ies_access_count')" :class="{'cur': sortname == 'ies_access_count' }">{{ $t("knowledge_hot") }}</li><!--最热-->
                    <li @click='selectClassList("s_cnt_like_count")' :class="{'cur': sortname == 's_cnt_like_count' }">{{ $t("rank_course_type_like") }}</li><!--赞-->
                </ul>
            </div>
            <div style="background: #fafafa;">
                <ul class="drawer-list clearfix" v-if="selectedCatalogs && selectedCatalogs.length != 0">
                    <li @click="navSelected(0, 0)" style="padding-top: 2px;">{{ $t("type_all_title") }} > </li><!--全部-->
                    <li v-for="(item, index) in selectedCatalogs" :key="index" @click="navSelected(index + 1, item.tnd_id)">
                        <div style="display: inline-block;">
                            <span class="font-size16" :class="{'color999' : selectedCatalogs.length == index + 1}">{{ item.tnd_title | omit }}</span>
                            <p class="color666 font-size11" v-if="selectedCatalogs.length == index + 1">{{ childCatalogs.courseCount > 1 ? $t("menu_cos_num_2", {'value': childCatalogs.courseCount}) : $t("menu_cos_num", {'value': childCatalogs.courseCount}) }} <em class="point"></em> {{childCatalogs.childCatalogCount > 1 ? $t("menu_sub_catalog_num_2", {'value': childCatalogs.childCatalogCount}) :  $t("menu_sub_catalog_num", {'value': childCatalogs.childCatalogCount}) }}</p><!--个课程/个子目录-->
                        </div>
                        <span style="color: #1a1a1a" v-show="selectedCatalogs.length != index + 1"> > </span>
                    </li>
                </ul>
            </div>
            <div class="body-content" :style="{height:selectedCatalogs && selectedCatalogs.length != 0 ? 'calc(100% - 134px)' : 'calc(100% - 50px)'}" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getClassList"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <div class="module-box-13" v-for="(item, $index) in classList" :key="$index" @click="jumpOpenDetail(item.itm_id)">
                                <div class="img-box">
                                    <img :src="appUrl + item.itm_icon" alt="" style="width: 100%;">
                                </div>
                                <div class="content-box">
                                    <div class="word-clamp-2 font-size15">{{item.itm_title}}</div>
                                    <div>
                                        <span style="float: left" v-if="sortname == 'itm_publish_timestamp'">{{ item.itm_publish_timestamp | formTime('splitTime') }}</span>
                                        <span style="float: left" v-if="sortname == 'ies_access_count'"><em class="browse-icon"></em>{{ item.ies_access_count }}</span>
                                        <span style="float: left" v-if="sortname == 's_cnt_like_count'"><em class="like-icon"></em> {{item.snsCount && item.snsCount.s_cnt_like_count ? item.snsCount.s_cnt_like_count : '0'}}</span>
                                    </div>
                                </div>
                            </div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t('no_data') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="classDrawer" @click.stop="isShowDrawer = false" v-if="isShowDrawer">
                <div class="drawer">
                    <div class="title-box">
                       <span>
                           <em>{{ $t("open_catalog") }}</em><!--公开课目录-->
                           <em>{{ $t("open_own_kinds", {'value': selectedCatalogs && selectedCatalogs.length + 1}) }}</em><!--界面目前是{{selectedCatalogs && selectedCatalogs.length + 1}}级分类-->
                       </span>
                        <span class="icon-close" @click.stop="isShowDrawer = false"><i></i></span>
                    </div>
                    <div style="height:calc(100% - 81px);overflow-y: auto;">
                        <span @click="selectCatalog(item)" v-for="(item, index) in catalogList.first" :key="index">
                             {{item.tnd_title}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
export default {
    name: 'publicCourseIndex',
    data() {
        return {
            pageNo: 1,
            isShowDrawer: false, //左侧菜单栏
            tndId: 0, //目录缩所需的id
            sortname: 'itm_publish_timestamp', //课程的排行
            classList: [], //课程的列表
            catalogList: [], //目录分类列表
            selectedCatalogs: [], //已选择的目录
            childCatalogs: '', //子目录
            total: 0, //列表总数
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getClassList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        navSelected(index, id) { //课程目录导航选择
            if (this.selectedCatalogs && this.selectedCatalogs.length === index) {
            } else {
                this.selectedCatalogs.splice(index);
                this.tndId = id;
                this.getClassCatalog();
                this.resetData();
            }
        },
        resetData() { //重置所有选项
            this.isLoading = true;
            this.onFetching = false;
            this.pageNo = 1;
            this.classList = [];
            this.getClassList();
        },
        selectClassList(sortname) { //选择课程排序
            this.sortname = sortname;
            this.resetData();
        },
        selectCatalog(item) { //选择课程目录
            this.tndId = item.tnd_id;
            this.resetData();
            this.getClassCatalog();
            this.selectedCatalogs.push(item);
            this.isShowDrawer = false;
        },
        getClassList(option) { //获取课程列表
            this.$axios({
                method: 'GET',
                url: '/app/course/openJson',
                params: {
                    pageNo: this.pageNo,
                    sortname: this.sortname,
                    sortorder: 'desc',
                    tndId: this.tndId ? this.tndId : null
                }
            }).then((res) => {
                if (res.data.rows && res.data.rows.length !== 0) {
                    if (option && option === 'refresh') {
                        this.classList = res.data.rows;
                    } else {
                        this.classList = [...this.classList, ...res.data.rows];
                    }
                };
                this.total = res.data.total;
                this.isLoading = false;
                this.pageNo++;
                if (this.classList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        getClassCatalog() { //获取目录分类
            this.$axios({
                method: 'GET',
                url: '/app/catalog/mobileJson',
                params: {
                    cos_type: 'public',
                    tndId: this.tndId
                }
            }).then(res => {
                if (res.data) {
                    this.catalogList = res.data.catalog;
                    this.childCatalogs = res.data;
                };
            });
        },
        jumpOpenDetail(id) { //跳转详情页面
            let itmId = this.wbEncryptor(id);
            this.$router.push({path: `/publicClass/openDetail/${itmId}`});
        }
    },
    mounted() {
        this.getClassCatalog();
        this.getClassList();
    },
    filters: {
        omit(val) {
            if (val) {
                let nameString = val.substr(0);
                if (nameString.length > 10) {
                    nameString = `${nameString.substr(0, 5)}...${nameString.substr(-5)}`;
                }
                return `${nameString}`;
            } else {
                return val;
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.$store.commit('addKeepAliveList', 'publicCourseIndex');
        });
    }
};
</script>

<style scoped>
    .classDrawer{
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 999;
    }
    .drawer{
        background: #ffffff;
        height: 100%;
        width: 80%;
        float: right;
    }
    .drawer .title-box{
        border-bottom: 1px solid #dddddd;
        padding: 20px 0 20px 15px;
    }
    .drawer .title-box span em{
        display: block;
    }
    .drawer .title-box span:first-child{
        display: inline-block;
    }
    .drawer .title-box span:first-child em:first-child{
         font-size: 18px;
         font-weight: bold;
     }
    .drawer .title-box span:first-child em:last-child{
        color: #999999;
    }
    .drawer div:last-child span{
        display: block;
        padding: 15px 0 15px 19px;
    }
    .icon-close {
        float: right;
        width: 40px;
        height: 40px;
    }
    .icon-close i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border: 2px solid #333;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(135deg);
        margin: 9px 0 0 10px;
    }
</style>
